<template>
  <div class="SvgPro">
    <div class="boxBtn">
      <button class="btnDraw" @click="clickDraw('')">开始绘制</button>
      <button class="btnReset" @click="clickReset">重置绘制</button>
      <button class="btnPut" :disabled="stutasDraw === 1" @click="clickPut">
        提交坐标
      </button>
      <button class="btnSet" @click="clickSet">生成坐标</button>
    </div>
    <div class="boxSvg">
      <img ref="img" class="img" src="../assets/OIP2.jpg" alt />
      <div
        id="polygon"
        ref="polygon"
        :class="borderRed ? 'borderRed' : ''"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SvgPro",
  data() {
    return {
      polygon: null, // svg实例
      borderRed: true, // 是否显示红框
      stutasDraw: 0, // 绘制的状态 0 重置 1 开始  2 结束
      allPolygonArray: [], // 所有点的坐标，三维数组
    };
  },
  mounted() {},
  methods: {
    // 重置绘制
    clickReset() {
      console.log("重置绘制");
      // 显示红框
      this.borderRed = true;
      // 判断是否正在绘制多边形
      if (this.polygon) {
        // 正在绘制多边形时先清除绘制
        if (this.polygon.type === "polygon") {
          this.polygon.draw("cancel");
        }
        // 清除绘制
        this.polygon = null;
        // 清除所有点的坐标
        this.allPolygonArray = [];
        this.$refs.polygon.innerHTML = "";
      }
      // 绘制的状态 0 重置
      this.stutasDraw = 0;
    },
    // 生成坐标
    clickSet() {
      console.log("生成坐标");
      // 要生成的坐标
      let dataTest =
        "[[[85,29],[54,80],[116,123],[145,51]],[[0,0]],[[201,34],[172,93],[233,101],[237,37]],[[0,0]]]";
      console.log("要生成的坐标", JSON.parse(dataTest));
      let tempData = JSON.parse(dataTest);
      // 将要绘制的多边形的点坐标进行计算相对位置
      tempData.forEach((item, index) => {
        item.forEach((item1, index) => {
          item1[0] = parseInt(item1[0] / this.getZoomRatio().scaleX);
          item1[1] = parseInt(item1[1] / this.getZoomRatio().scaleY);
        });
      });
      // 根据坐标绘制
      this.pointDraw(tempData);
      console.log("要绘制的坐标", tempData);
    },
    // 提交坐标
    clickPut() {
      console.log("提交坐标");
      switch (this.stutasDraw) {
        case 2:
          // 绘制状态为结束
          console.log(JSON.stringify(this.allPolygonArray));
          break;
        case 1:
          // 绘制状态为开始
          console.log("未结束绘制,无法提交");
          break;
        case 0:
          // 绘制状态为重置
          console.log(null);
          break;
        default:
          break;
      }
    },
    // 开始绘制
    clickDraw() {
      console.log("开始绘制");
      this.$nextTick(() => {
        // 存在多边形就进行清除
        if (this.polygon) {
          // 重置绘制
          this.clickReset();
        }
        // 去掉红边框
        this.borderRed = false;
        // 开始绘制多边形
        this.polygon = new SVG("polygon")
          .size("100%", "100%")
          .fill("none")
          .stroke({ width: 1, color: "#f00" })
          .polygon()
          .draw();
        // 设置svg的class
        this.polygon.parent().addClass("svgDom");
        // 将绘制状态变为开始
        this.stutasDraw = 1;
        // 监听绘制开始状态
        this.polygon.on("drawstart", (e) => {
          console.log("drawstart");
          // 将绘制状态变为开始
          this.stutasDraw = 1;
          // 监听键盘按下事件
          document.addEventListener("keydown", (e) => {
            // 是否为enter
            if (e.keyCode == 13) {
              // 完成绘制
              this.polygon.draw("done");
              // 取消监听绘制开始状态
              this.polygon.off("drawstart");
              // 当前绘制的多边形的点坐标进行计算相对位置
              this.polygon._array.value.forEach((item, index) => {
                item[0] = parseInt(item[0] * this.getZoomRatio().scaleX);
                item[1] = parseInt(item[1] * this.getZoomRatio().scaleY);
              });
              // 当前绘制的多边形的点坐标保存
              this.allPolygonArray.push(this.polygon._array.value);
              // 获取svgdom，并生成新的polygon
              this.polygon = this.polygon.parent().polygon().draw();
            }
          });
        });

        this.polygon.on("drawstop", () => {
          // remove listener
          console.log("drawstop");
          this.stutasDraw = 2;
        });
      });
    },
    // 根据坐标绘制
    pointDraw(data) {
      console.log("根据坐标绘制");
      this.$nextTick(() => {
        // 存在多边形就进行清除
        if (this.polygon) {
          // 重置绘制
          this.clickReset();
        }
        // 去掉红边框
        this.borderRed = false;
        // 开始绘制
        this.polygon = new SVG("polygon")
          .size("100%", "100%")
          .fill("none")
          .stroke({ width: 1, color: "#f00" });
        // 循环坐标绘制
        data.forEach((item, index) => {
          this.polygon.polygon(item);
          // 当前绘制的多边形的点坐标进行计算相对位置
          item.forEach((item1, index) => {
            item1[0] = parseInt(item1[0] * this.getZoomRatio().scaleX);
            item1[1] = parseInt(item1[1] * this.getZoomRatio().scaleY);
          });
          // 保存坐标
          this.allPolygonArray.push(item);
        });
        console.log(this.polygon);
        // 将绘制状态变为结束
        this.stutasDraw = 2;
      });
    },
    // 获取缩放比例
    getZoomRatio() {
      // 获取img元素
      let img = this.$refs.img;
      // 获取图片的真实宽度
      let naturalWidth = parseInt(img.naturalWidth);
      // 获取图片的真实高度
      let naturalHeight = parseInt(img.naturalHeight);
      // 获取图片元素的宽度
      let width = parseInt(img.width);
      // 获取图片元素的高度
      let height = parseInt(img.height);
      // 返回计算的缩放值
      return {
        scaleX: naturalWidth / width,
        scaleY: naturalHeight / height,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.SvgPro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .boxBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    button {
      margin: 0 5px;
    }
  }
  .boxSvg {
    width: 1000px;
    height: 500px;
    position: relative;
    .img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    #polygon {
      width: 100%;
      height: 100%;
    }
  }
  .borderRed {
    box-shadow: 0 0 0 1px #ff3d3d inset;
  }
}
</style>